<template>
    <view class="container-sjzdl">
        <div class="form">
            <!-- 游戏区服 -->
            <div class="form-item">
                <text class="label">游戏区服</text>
                <div class="handle" @click="showServerPicker">
                    <view class="selected-tag">
                        {{ selectedServerText || '请选择您所在的区服' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 代练类型 -->
            <div class="form-item">
                <text class="label">代练类型</text>
                <div class="handle" @click="showModePicker">
                    <view class="selected-tag">
                        {{ selectedMode || '请选择代练类型' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 物资 -->
            <div class="form-item" v-if="selectedMode == '物资'">
                <uni-data-checkbox mode="button" v-model="selectMaterial" :localdata="material"
                    style="width: 100%;"></uni-data-checkbox>
            </div>

            <!-- 是否有保险 -->
            <div class="form-item" v-if="selectedMode == '物资'">
                <text class="label">是否有保险</text>
                <div class="handle">
                    <checkbox color="#57b1ff" :checked="insuranceFlag" @click="changeInsuranceFlag"></checkbox>
                </div>
            </div>
            <!-- 保险格数 -->
            <div class="form-item insurance-options" v-if="insuranceFlag && selectedMode == '物资'">
                <text class="label">保险格数</text>
                <uni-data-checkbox mode="button" v-model="selectInsurance"
                    :localdata="insurance"></uni-data-checkbox>
            </div>
            <!-- 保底物资数量 -->
            <div class="form-item conditional-item" v-if="selectedMode == '物资' && selectMaterial == '护航'">
                <text class="label">保底物资数量</text>
                <div class="handle" @click="showGuaranteedMaterialsPicker">
                    <view class="selected-tag">
                        {{ selectedGuaranteedMaterials || '请选择保底物资数量' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 订单任务 (非洲之心) -->
            <div class="form-item conditional-item" v-if="selectedMode == '物资' && selectMaterial == '非洲之心'">
                <text class="label">订单任务</text>
                <div class="handle" @click="showOrderPicker">
                    <view class="selected-tag">
                        {{ order || '请选择订单任务' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 哈夫币数量 -->
            <div class="form-item conditional-item" v-if="selectedMode == '物资' && selectMaterial == '哈夫币'">
                <text class="label">哈夫币数量</text>
                <div class="handle" @click="showHafuPicker">
                    <view class="selected-tag">
                        {{ hafu || '请选择您完成的哈夫币数量' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 等级任务 -->
            <div class="form-item" v-if="selectedMode == '等级'">
                <text class="label">等级任务</text>
                <div class="handle" @click="showCurrentLevelPicker">
                    <view class="selected-tag">
                        {{ levelDisplay || '请输入等级任务' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 保险箱数量 -->
            <div class="form-item" v-if="selectedMode == '赛季3X3保险箱'">
                <text class="label">保险箱数量</text>
                <div class="handle" @click="showSafesNumberPicker">
                    <view class="selected-tag">
                        {{ safesNumberDisplay || '请输入保险箱数量，限制1-100个' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
        </div>

        <!-- Popups (结构与 YXLM/WZDL 保持一致) -->
        <!-- 游戏区服选择弹窗 -->
        <uni-popup ref="serverPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择游戏区服</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedGroupIndex !== null && serverTree[selectedGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                                class="popup-item" @click="selectServerItem(item)">
                                {{ item.text }}
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideServerPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 代练类型选择弹窗 -->
        <uni-popup ref="modePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择代练类型</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in modeTree" :key="index" class="popup-item" @click="selectModeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideModePicker">取消</view>
            </view>
        </uni-popup>
        <!-- 保底物资数量弹窗 -->
        <uni-popup ref="guaranteedMaterialsPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择保底物资数量</div>
                <scroll-view scroll-y class="popup-scroll" style="max-height: 500px;">
                    <view v-for="(item, index) in guaranteedMaterialsTree" :key="index" class="popup-item"
                        @click="selectGuaranteedMaterialsItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideGuaranteedMaterialsPicker">取消</view>
            </view>
        </uni-popup>
        <!-- 订单任务弹窗 -->
        <uni-popup ref="orderPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择订单任务</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in orderTree" :key="index" class="popup-item" @click="selectOrderItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideOrderPicker">取消</view>
            </view>
        </uni-popup>
        <!-- 哈夫币数量弹窗 -->
        <uni-popup ref="hafuPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择哈夫币数量</div>
                <scroll-view scroll-y class="popup-scroll" style="max-height: 500px;">
                    <view v-for="(item, index) in hafuTree" :key="index" class="popup-item" @click="selectHafuItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideHafuPicker">取消</view>
            </view>
        </uni-popup>
        <!-- 等级任务弹窗 -->
        <uni-popup ref="currentLevelPopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">等级任务</div>
                <div class="input-row">
                    <span>当前等级</span>
                    <input type="number" placeholder="请输入当前等级" v-model="tempCurrentLevel">
                </div>
                <div class="input-row">
                    <span>目标等级</span>
                    <input type="number" placeholder="请输入目标等级" v-model="tempToLevel">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideCurrentLevelPicker">取消</span>
                    <span class="confirm" @click="confirmCurrentLevelPicker">确认</span>
                </view>
            </view>
        </uni-popup>
        <!-- 保险箱数量弹窗 -->
        <uni-popup ref="safesNumberPopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">保险箱数量</div>
                <div class="input-row score-input">
                    <span>数量</span>
                    <input type="number" placeholder="请输入保险箱数量 (1-100)" v-model="tempSafesNumber">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideSafesNumberPicker">取消</span>
                    <span class="confirm" @click="confirmSafesNumberPicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 订单信息区域 (与 WZDL 类似) -->
        <div class="orderMsg">
            <div class="pay">
                <image src="../../static/icons/pay.png"></image>
                <div class="text">建议出价 <span class="price-highlight">{{ suggestedPrice }}元</span></div>
            </div>
            <div class="time">
                <image src="../../static/icons/time.png"></image>
                <div class="text">预计时限 <span class="time-highlight">{{ estimatedTime }}小时</span></div>
            </div>
        </div>

        <!-- Placeholder for footer -->
        <view class="footer-placeholder"></view>

        <!-- 底部按钮 (与 WZDL 类似) -->
        <div class="footer">
            <div class="tip">代练通全程为您服务</div>
            <div class="button" @click="submitOrder">下一步</div>
        </div>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            // Server Selection
            serverTree: [
                { text: '安卓QQ', value: "安卓QQ", children: [{ text: '默认服', value: "默认服" }] },
                { text: '安卓微信', value: "安卓微信", children: [{ text: '默认服', value: "默认服" }] },
                { text: '苹果QQ', value: "苹果QQ", children: [{ text: '默认服', value: "默认服" }] },
                { text: '苹果微信', value: "苹果微信", children: [{ text: '默认服', value: "默认服" }] },
                { text: 'PC', value: "PC", children: [{ text: '默认服', value: "默认服" }] }
            ],
            selectedServer: "默认服",
            selectedGroupIndex: 0,

            // Mode Selection
            modeTree: [
                { text: '物资', value: "物资" },
                { text: '等级', value: "等级" },
                { text: '赛季3X3保险箱', value: "赛季3X3保险箱" },
            ],
            selectedMode: "物资",

            // Material Options (for 物资)
            material: [
                { text: '护航', value: '护航' },
                { text: '非洲之心', value: '非洲之心' },
                { text: '哈夫币', value: '哈夫币' }
            ],
            selectMaterial: "护航",

            // Insurance Options (for 物资)
            insuranceFlag: false,
            insurance: [
                { text: '1格', value: '1格' }, { text: '2格', value: '2格' }, { text: '3格', value: '3格' },
                { text: '4格', value: '4格' }, { text: '5格', value: '5格' }, { text: '6格', value: '6格' }
            ],
            selectInsurance: "4格",

            // Guaranteed Materials (for 物资 - 护航)
            guaranteedMaterialsTree: [], // Generated in mounted
            selectedGuaranteedMaterials: "800W",

            // Order Task (for 物资 - 非洲之心)
            orderTree: [
                { text: "必出护航非洲之心1个 未出0结算", value: "必出护航非洲之心1个 未出0结算" },
                { text: "必出护航非洲之心2个 未出0结算", value: "必出护航非洲之心2个 未出0结算" },
                { text: "必出护航非洲之心3个 未出0结算", value: "必出护航非洲之心3个 未出0结算" },
                { text: "护航非洲之心1个 未出则保底1300万物资", value: "护航非洲之心1个 未出则保底1300万物资" },
                { text: "护航非洲之心2个 未出则保底2500万物资", value: "护航非洲之心2个 未出则保底2500万物资" },
                // Duplicate entry removed
            ],
            order: "",

            // Hafu Coins (for 物资 - 哈夫币)
            hafuTree: [], // Generated in mounted
            hafu: "",

            // Level Task (for 等级)
            currentLevel: '',
            toLevel: '',
            tempCurrentLevel: '', // Temporary values for popup
            tempToLevel: '',

            // Safes Number (for 赛季3X3保险箱)
            safesNumber: '',
            tempSafesNumber: '', // Temporary value for popup

            // Price/Time Display (example static values, should be dynamic)
            suggestedPrice: 87,
            estimatedTime: 47,
        };
    },
    computed: {
        selectedServerText() {
            // Ensure indices are valid before accessing
            if (this.serverTree && this.serverTree[this.selectedGroupIndex] && this.selectedServer) {
                return `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`;
            }
            return '';
        },
        levelDisplay() {
            if (this.currentLevel !== '' && this.toLevel !== '') {
                return `${this.currentLevel}级 - ${this.toLevel}级`;
            }
            return '';
        },
        safesNumberDisplay() {
            if (this.safesNumber !== '') {
                return `${this.safesNumber} 个`;
            }
            return '';
        }
        // Add more computed properties as needed
    },
    mounted() {
        // Generate dynamic trees
        this.generateGuaranteedMaterialsTree();
        this.generateHafuTree();
    },
    methods: {
        // --- Popup Show/Hide (Generic) ---
        showPopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].open();
            } else {
                console.error(`Popup ref '${refName}' not ready.`);
                uni.showToast({ title: '组件加载中...', icon: 'none' });
            }
        },
        hidePopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].close();
            } else {
                console.error(`Popup ref '${refName}' not ready.`);
            }
        },

        // --- Picker Methods ---
        showServerPicker() { this.showPopup('serverPopup'); },
        hideServerPicker() { this.hidePopup('serverPopup'); },
        selectGroup(index) { this.selectedGroupIndex = index; },
        selectServerItem(item) {
            this.selectedServer = item.text;
            this.hideServerPicker();
        },

        showModePicker() { this.showPopup('modePopup'); },
        hideModePicker() { this.hidePopup('modePopup'); },
        selectModeItem(item) {
            this.selectedMode = item.text;
            this.resetConditionalFields(); // Reset fields when mode changes
            this.hideModePicker();
        },

        changeInsuranceFlag() {
            this.insuranceFlag = !this.insuranceFlag;
            if (!this.insuranceFlag) {
                // Reset insurance selection if flag is turned off
                // this.selectInsurance = '4格'; // Or set to null/default
            }
        },

        showGuaranteedMaterialsPicker() { this.showPopup('guaranteedMaterialsPopup'); },
        hideGuaranteedMaterialsPicker() { this.hidePopup('guaranteedMaterialsPopup'); },
        selectGuaranteedMaterialsItem(item) {
            this.selectedGuaranteedMaterials = item.text;
            this.hideGuaranteedMaterialsPicker();
        },

        showOrderPicker() { this.showPopup('orderPopup'); },
        hideOrderPicker() { this.hidePopup('orderPopup'); },
        selectOrderItem(item) {
            this.order = item.text;
            this.hideOrderPicker();
        },

        showHafuPicker() { this.showPopup('hafuPopup'); },
        hideHafuPicker() { this.hidePopup('hafuPopup'); },
        selectHafuItem(item) {
            this.hafu = item.text;
            this.hideHafuPicker();
        },

        showCurrentLevelPicker() {
            this.tempCurrentLevel = this.currentLevel;
            this.tempToLevel = this.toLevel;
            this.showPopup('currentLevelPopup');
        },
        hideCurrentLevelPicker() { this.hidePopup('currentLevelPopup'); },
        confirmCurrentLevelPicker() {
            // Add validation if needed
            if (parseInt(this.tempToLevel) <= parseInt(this.tempCurrentLevel)) {
                uni.showToast({ title: '目标等级需大于当前等级', icon: 'none' });
                return;
            }
            this.currentLevel = this.tempCurrentLevel;
            this.toLevel = this.tempToLevel;
            this.hideCurrentLevelPicker();
        },

        showSafesNumberPicker() {
            this.tempSafesNumber = this.safesNumber;
            this.showPopup('safesNumberPopup');
        },
        hideSafesNumberPicker() { this.hidePopup('safesNumberPopup'); },
        confirmSafesNumberPicker() {
            const num = parseInt(this.tempSafesNumber);
            if (isNaN(num) || num < 1 || num > 100) {
                uni.showToast({ title: '请输入1-100的保险箱数量', icon: 'none' });
                return;
            }
            this.safesNumber = this.tempSafesNumber;
            this.hideSafesNumberPicker();
        },

        // --- Helper Methods ---
        generateGuaranteedMaterialsTree() {
            this.guaranteedMaterialsTree = Array.from({ length: 40 }, (_, i) => ({
                text: `${(i + 1) * 50}W`,
                value: `${(i + 1) * 50}W`
            }));
        },
        generateHafuTree() {
            this.hafuTree = Array.from({ length: 20 }, (_, i) => ({
                text: `${(i + 1) * 50}W`,
                value: `${(i + 1) * 50}W`
            }));
        },
        resetConditionalFields() {
            // Reset fields specific to certain modes when mode changes
            this.selectMaterial = '护航';
            this.insuranceFlag = false;
            this.selectInsurance = '4格';
            this.selectedGuaranteedMaterials = '800W';
            this.order = '';
            this.hafu = '';
            this.currentLevel = '';
            this.toLevel = '';
            this.safesNumber = '';
        },

        // --- Form Validation ---
        validateForm() {
            if (!this.selectedServer || !this.selectedServerText) {
                uni.showToast({ title: '请选择游戏区服', icon: 'none' }); return false;
            }
            if (!this.selectedMode) {
                uni.showToast({ title: '请选择代练类型', icon: 'none' }); return false;
            }

            switch (this.selectedMode) {
                case '物资':
                    if (!this.selectMaterial) { uni.showToast({ title: '请选择物资类型', icon: 'none' }); return false; }
                    if (this.selectMaterial === '护航' && !this.selectedGuaranteedMaterials) { uni.showToast({ title: '请选择保底物资', icon: 'none' }); return false; }
                    if (this.selectMaterial === '非洲之心' && !this.order) { uni.showToast({ title: '请选择订单任务', icon: 'none' }); return false; }
                    if (this.selectMaterial === '哈夫币' && !this.hafu) { uni.showToast({ title: '请选择哈夫币数量', icon: 'none' }); return false; }
                    if (this.insuranceFlag && !this.selectInsurance) { uni.showToast({ title: '请选择保险格数', icon: 'none' }); return false; }
                    break;
                case '等级':
                    if (this.currentLevel === '' || this.toLevel === '') { uni.showToast({ title: '请输入等级任务', icon: 'none' }); return false; }
                    if (parseInt(this.toLevel) <= parseInt(this.currentLevel)) { uni.showToast({ title: '目标等级需大于当前等级', icon: 'none' }); return false; }
                    break;
                case '赛季3X3保险箱':
                    if (this.safesNumber === '') { uni.showToast({ title: '请输入保险箱数量', icon: 'none' }); return false; }
                    const num = parseInt(this.safesNumber);
                    if (isNaN(num) || num < 1 || num > 100) { uni.showToast({ title: '保险箱数量需在1-100之间', icon: 'none' }); return false; }
                    break;
            }
            return true;
        },

        // --- Submit Order ---
        submitOrder() {
            if (!this.validateForm()) {
                return;
            }

            // Construct formData object
            const orderData = {
                server: this.selectedServerText,
                mode: this.selectedMode,
                // Conditional fields based on mode
                selectMaterial: this.selectedMode === '物资' ? this.selectMaterial : null,
                insuranceFlag: this.selectedMode === '物资' ? this.insuranceFlag : null,
                selectInsurance: (this.selectedMode === '物资' && this.insuranceFlag) ? this.selectInsurance : null,
                selectedGuaranteedMaterials: (this.selectedMode === '物资' && this.selectMaterial === '护航') ? this.selectedGuaranteedMaterials : null,
                orderTask: (this.selectedMode === '物资' && this.selectMaterial === '非洲之心') ? this.order : null, // Renamed for clarity
                hafuCoins: (this.selectedMode === '物资' && this.selectMaterial === '哈夫币') ? this.hafu : null, // Renamed for clarity
                currentLevel: this.selectedMode === '等级' ? this.currentLevel : null,
                toLevel: this.selectedMode === '等级' ? this.toLevel : null,
                safesNumber: this.selectedMode === '赛季3X3保险箱' ? this.safesNumber : null,
                // Add price/time if calculated dynamically
                suggestedPrice: this.suggestedPrice,
                estimatedTime: this.estimatedTime,
            };

            // Remove null fields
            Object.keys(orderData).forEach(key => {
                if (orderData[key] === null || orderData[key] === undefined) {
                    delete orderData[key];
                }
            });

            console.log("准备提交的订单数据 (SJZ DL):", orderData);

            uni.navigateTo({
                url: `/pages/SubmitOrder/DL/SJZsubmitOrder/index?formData=${encodeURIComponent(JSON.stringify(orderData))}`
            });
        }
    }
};
</script>

<style>
/* Scoped styles moved here */
.container-sjzdl { /* Added root element class */
    padding-bottom: 180rpx; /* Match footer height */
}
/* 表单样式 */
.form {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}

.form-item {
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 30rpx;
}
.form-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
/* Special alignment for checkbox options */
.insurance-options {
    flex-direction: column;
    align-items: stretch; /* Stretch children */
    border-bottom: none; /* Remove double border */
    padding-bottom: 0;
}
.insurance-options .label {
    margin-bottom: 15rpx; /* Space below label */
    width: 100%; /* Full width label */
}
.insurance-options uni-data-checkbox {
    width: 100%;
}
.conditional-item {
     margin-top: 10rpx; /* Reduced top margin */
}

.form-item .label {
    width: 30%;
    height: 100%;
    display: block;
    font-size: 28rpx;
    color: #333;
    flex-shrink: 0; /* Prevent label shrinking */
}

.form-item .handle {
    width: 70%;
    cursor: pointer;
}
.form-item .handle checkbox {
     transform: scale(0.8); /* Slightly smaller checkbox */
}

.picker,
.input {
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10rpx;
    min-height: 50rpx; /* Use min-height */
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
    text-align: right; /* Ensure right alignment */
}

.selected-tag image {
    padding-left: 15rpx;
    width: 24rpx;
    height: 24rpx;
    flex-shrink: 0; /* Prevent icon shrinking */
}

/* Styles for uni-data-checkbox buttons */
.form-item uni-data-checkbox .uni-data-checklist .checklist-group {
     justify-content: flex-start; /* Align buttons to start */
     flex-wrap: wrap; /* Allow wrapping */
}
.form-item uni-data-checkbox .uni-data-checklist .checklist-group .checklist-box {
    margin-right: 15rpx !important; /* Spacing between buttons */
    margin-bottom: 15rpx !important;
    margin-left: 0 !important;
}
.form-item uni-data-checkbox .uni-data-checklist .checklist-group .checklist-box.is--button {
    border: 1px solid #007aff !important;
    border-radius: 8rpx !important;
    padding: 8rpx 25rpx !important; /* Adjust padding */
}
.form-item uni-data-checkbox .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked {
    background-color: #007aff !important;
}
.form-item uni-data-checkbox .uni-data-checklist .checklist-group .checklist-box.is--button .checklist-content {
    color: #007aff !important;
    font-size: 26rpx !important;
}
.form-item uni-data-checkbox .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked .checklist-content {
     color: #fff !important;
}


/* Popup styles (copied from YXLM/WZDL for consistency) */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}
.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    padding: 30rpx 20rpx 20rpx;
    border-bottom: 1rpx solid #eee;
}
.popup-content .body {
    max-height: 70vh;
    display: flex;
}
.popup-nav {
    width: 200rpx;
    border-right: 1px solid #eee;
    background-color: #f8f8f8;
    height: 70vh;
}
.nav-item {
    padding: 25rpx 20rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
    border-bottom: 1rpx solid #eee;
}
.nav-item:last-child { border-bottom: none; }
.nav-item.active {
    color: #1ba035;
    font-weight: bold;
    background-color: #fff;
}
.popup-scroll {
    flex: 1;
    height: 70vh;
}
.popup-item {
    padding: 25rpx 40rpx;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}
.popup-item:active { background-color: #f0f0f0; }
.popup-item:last-child { border-bottom: none; }
.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28rpx;
    color: #999;
}
.input-popup .input-row {
    display: flex;
    align-items: center;
    padding: 25rpx 40rpx;
    border-bottom: 1rpx solid #eee;
}
.input-popup .input-row span {
    width: 30%;
    font-size: 28rpx;
    color: #333;
}
.input-popup .input-row input {
    flex: 1;
    font-size: 28rpx;
    text-align: right;
    color: #333;
}
.input-popup .input-row input::placeholder {
    color: #ccc;
}
.input-popup .score-input input::placeholder {
     font-size: 26rpx;
}
.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    padding: 25rpx;
    color: #666;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-footer:active { background-color: #f0f0f0; }
.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}
.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 25rpx;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-footer2 .cancel { color: #198dda; }
.popup-footer2 .cancel:active { background-color: #f2f2f2; }
.popup-footer2 .confirm { background-color: #198dda; color: #fff; }
.popup-footer2 .confirm:active { background-color: #157ab3; }

/* Order Message Area */
.orderMsg {
    width: 100%;
    display: flex;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    background-color: #f8f8f8;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
}
.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.orderMsg .pay image,
.orderMsg .time image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
}
.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 26rpx;
    color: #666;
}
.price-highlight,
.time-highlight {
    color: red;
    font-weight: bold;
    margin-left: 5rpx;
}

/* Footer */
.footer-placeholder { height: 180rpx; }
.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 10;
    border-top: 1rpx solid #e0e0e0;
}
.footer .tip {
    width: 100%;
    font-size: 24rpx;
    color: #999;
    background-color: #f8f8f8;
    padding: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.footer .button {
    width: 100%;
    height: 100rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007aff;
    font-size: 32rpx;
    font-weight: bold;
    cursor: pointer;
}
.footer .button:active { background-color: #0056b3; }
</style>